<template>
  <div class="todo-list">
    <div>
      <label>新增待办</label>
      <input v-model="state.todo" @keyup.enter="handleAddTodo" />
    </div>
    <div>
      <h3>待办列表({{ todos.length }})</h3>
      <ul>
        <li
          v-for="item in todos"
          :key="item.id"
          @click="handleChangeStatus(item, true)"
        >
          <input type="checkbox" />
          <label>{{ item.text }}</label>
        </li>
      </ul>
    </div>
    <div>
      <h3>已办列表({{ dones.length }})</h3>
    </div>
    <ul>
      <li
        v-for="item in dones"
        :key="item.id"
        @click="handleChangeStatus(item, false)"
      >
        <input type="checkbox" checked />
        <label>{{ item.text }}</label>
      </li>
    </ul>
    <h1 @click="jumpTo">跳转</h1>
  </div>
</template>
<script lang="ts">
// 在vue2中 data 在vue3中使用 reactive代替
import { reactive, computed } from "vue";
import { useRouter } from "vue-router";
// import router from "../../router/index.js";
export default {
  // setup相当于vue2.0的 beforeCreate和 created，是vue3新增的一个属性，所有的操作都在此属性中完成
  setup(props: any, context: any) {
    // 路由跳转 方式一
    const router = useRouter();
    // 路由跳转 方式二
    router.push("/");
    // 通过reactive 可以初始化一个可响应的数据，与Vue2.0中的Vue.observer很相似
    const state = reactive({
      todoList: [
        {
          id: 1,
          done: false,
          text: "吃饭",
        },
        {
          id: 2,
          done: false,
          text: "睡觉",
        },
        {
          id: 3,
          done: false,
          text: "打豆豆",
        },
      ],
      todo: "",
    });
    // 使用计算属性生成待办列表
    const todos = computed(() => {
      return state.todoList.filter((item) => !item.done);
    });

    // 使用计算属性生成已办列表
    const dones = computed(() => {
      return state.todoList.filter((item) => item.done);
    });

    // 修改待办状态
    const handleChangeStatus = (item: { done: any }, status: any) => {
      item.done = status;
    };

    // 新增待办
    const handleAddTodo = () => {
      if (!state.todo) {
        alert("请输入待办事项");
        return;
      }
      state.todoList.push({
        text: state.todo,
        id: Date.now(),
        done: false,
      });
      state.todo = "";
    };
    // 链接跳转
    const jumpTo = () => {
      router.push({
        path: "/created",
      });
    };

    // 在Vue3.0中，所有的数据和方法都通过在setup 中 return 出去，然后在template中使用
    return {
      state,
      todos,
      dones,
      handleChangeStatus,
      handleAddTodo,
      jumpTo,
    };
  },
};
</script>
<style scoped>
.todo-list {
  text-align: center;
}

.todo-list ul li {
  list-style: none;
}
</style>
